import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Space, Button, Tooltip, Select, Dropdown, DatePicker } from "antd";
import { useEffect } from "react";
import { useTable, useTableDialog } from "@/hooks/useTable";
import { useFormDialog } from "@/hooks/useForm";
import FormModal from "@/component/FormModal";
import CloudTable from "@/component/CloudTable";
import { page, del, batDel, save, edit } from "@/views/attendance/calendar/api";
import { page as pageWorkday, save as saveWorkday, edit as editWorkday, del as removeWorkday, batDel as batchRemoveWorkday } from "@/views/attendance/calendar/workday/api";
import { STATUS_ENUMS, STATUS_OPTIONS, HOLIDAY_TYPE_ENUMS, HOLIDAY_TYPE_OPTIONS, WORKDAY_TYPE_ENUMS, WORKDAY_TYPE_OPTIONS } from "@/views/attendance/calendar/data";
import { page as pageHoliday, save as saveHoliday, edit as editHoliday, del as removeHoliday, batDel as batchRemoveHoliday } from "@/views/attendance/calendar/holiday/api";
import TableModal from '@/component/TableModal';
import dayjs from 'dayjs';

const Calendar = () => {

    // -------------------
    // ---  节假日列表  ---
    // -------------------

    const holidayColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '节日名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '所属年份',
            dataIndex: 'year',
            key: 'year',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '开始时间',
            dataIndex: 'startDate',
            key: 'startDate',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '结束时间',
            dataIndex: 'endDate',
            key: 'endDate',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '天数',
            dataIndex: 'days',
            key: 'days',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '节日类型',
            dataIndex: 'type',
            key: 'type',
            search: 'selected',
            options: HOLIDAY_TYPE_OPTIONS(),
            render: (val) => HOLIDAY_TYPE_ENUMS[val] || ''
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => onEditHolidayForm(row)} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => holidayTableModal.onRemove(val, undefined, removeHolidayCallback)} />
                        </Tooltip>
                    </div>
                )
            }
        }
    ];

    const removeHolidayCallback = () => {
        holidayTableModal.onReload(holidayTableModal.row);
    }

    const holidayTools = () => (
        <Space>
            <Button type="primary" size='small' onClick={() => holidayForm.isOpenDialog(undefined, '新增')}>新增</Button>
            <Button type='dashed' size='small' style={{ color: 'red' }} onClick={() => holidayTableModal.onBatchRemove(holidayTableModal.selected)}>删除</Button>
        </Space>
    );

    const holidayTableModal = useTableDialog({
        title: '节假日',
        width: 800,
        reload: pageHoliday,
        remove: removeHoliday,
        batchRemove: batchRemoveHoliday,
        tools: holidayTools,
        columns: holidayColumns,
    });

    const onHolidayFormCallback = (model) => {
        let param = holidayTableModal.row?.params?.find((item) => item.field === 'calendarId');
        let entity = {
            ...model,
            startDate: model.startDate.format('YYYY-MM-DD'),
            endDate: model.endDate.format('YYYY-MM-DD'),
            calendarId: param?.value,
        }
        holidayForm.onSubmit(entity, holidayTableModal.onReload);
    }

    const holidayForm = useFormDialog({
        save: saveHoliday,
        edit: editHoliday,
        callback: onHolidayFormCallback,
        items: [
            {
                label: '节日名称',
                name: 'name',
                rules: [{ required: true, message: '请输入节日名称' }],
            },
            {
                label: '所属年份',
                name: 'year',
                rules: [{ required: true, message: '请输入年份' }],
            },
            {

                label: '开始时间',
                name: 'startDate',
                render: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
                rules: [{ required: true, message: '请选择开始时间' }],
            },
            {
                label: '结束时间',
                name: 'endDate',
                render: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
                rules: [{ required: true, message: '请选择结束时间' }],
            },
            {
                label: '天数',
                name: 'days',
            },
            {
                label: '节日类型',
                name: 'type',
                rules: [{ required: true, message: '请选择类型' }],
                render: <Select placeholder='请选择类型' options={HOLIDAY_TYPE_OPTIONS()} />,
            },
        ],
    });

    const onEditHolidayForm = (model) => {
        model = {
            ...model,
            startDate: model?.startDate ? dayjs(model.startDate, 'YYYY-MM-DD') : null,
            endDate: model?.endDate ? dayjs(model.endDate, 'YYYY-MM-DD') : null,
        }
        holidayForm.isOpenDialog(model, '编辑');
    }

    // -------------------
    // ---  工作日表单  ---
    // -------------------

    const onWorkdayFormCallback = (model) => {
        let param = workdayTableModal.row.params?.find(each => each.field === 'calendarId');
        let entity = {
            ...model,
            workday: model.workday?.format('YYYY-MM-DD'),
            calendarId: param?.value
        }
        workdayForm.onSubmit(entity, workdayTableModal.onReload);
    }

    // 表单设置
    const workdayForm = useFormDialog({
        save: saveWorkday,
        edit: editWorkday,
        callback: onWorkdayFormCallback,
        items: [
            {
                label: '所属年份',
                name: 'year',
                rules: [{ required: true, message: '请输入年份' }],
            },
            {
                label: '工作日',
                name: 'workday',
                render: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
                rules: [{ required: true, message: '请选择工作日' }],
            },
            {
                label: '日期类型',
                name: 'type',
                render: <Select placeholder='请选择状态' options={WORKDAY_TYPE_OPTIONS()} />,
                rules: [{ required: true, message: '请选择日期类型' }],
            },
            {
                label: '备注',
                name: 'remark',
            },
        ],
    });

    // -------------------
    // ---  工作日列表  ---
    // -------------------

    const workdayColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '所属年份',
            dataIndex: 'year',
            key: 'year',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '工作日',
            dataIndex: 'workday',
            key: 'workday',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '日期类型',
            dataIndex: 'type',
            key: 'type',
            search: 'selected',
            options: WORKDAY_TYPE_OPTIONS(),
            render: (val) => WORKDAY_TYPE_ENUMS[val] || ''
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 100,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                let model = {
                    ...row,
                    workday: row?.workday ? dayjs(row.workday, 'YYYY-MM-DD') : null,
                }
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => workdayForm.isOpenDialog(model, '编辑')} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => workdayTableModal.onRemove(val, undefined, removeWorkdayCallback)} />
                        </Tooltip>
                    </div>
                )
            }
        }
    ];

    const workdayTools = () => (
        <Space>
            <Button type="primary" size='small' onClick={() => workdayForm.isOpenDialog(undefined, '新增')}>新增</Button>
            <Button type='dashed' size='small' style={{ color: 'red' }} onClick={() => workdayTableModal.onBatchRemove(workdayTableModal.selected)}>删除</Button>
        </Space>
    );

    const workdayTableModal = useTableDialog({
        title: '调休工作日',
        width: 800,
        reload: pageWorkday,
        remove: removeWorkday,
        batchRemove: batchRemoveWorkday,
        tools: workdayTools,
        columns: workdayColumns,
    });

    const removeWorkdayCallback = () => {
        workdayTableModal.onReload(workdayTableModal.row);
    }

    // -------------------
    // ---   表单操作   ---
    // -------------------

    // 表单提交
    const onCalendarFormCallback = (model) => {
        calendarForm.onSubmit(model, calendarTable.onReload);
    }

    // 表单设置
    const calendarForm = useFormDialog({
        save: save,
        edit: edit,
        callback: onCalendarFormCallback,
        items: [
            {
                label: '名称',
                name: 'name',
            },
            {
                label: '状态',
                name: 'status',
                render: <Select placeholder='请选择状态' options={STATUS_OPTIONS()} />,
            },
            {
                label: '备注',
                name: 'remark',
            },
        ],
    });

    // -------------------
    // ---   表格操作   ---
    // -------------------

    // 表格自定义按钮
    const calendarTools = () => {
        return (
            <Space>
                <Button type="primary" onClick={() => calendarForm.isOpenDialog(undefined, '新增')}>新增</Button>
                <Button type='dashed' style={{ color: 'red' }} onClick={() => calendarTable.onBatchRemove(calendarTable.selected)}>删除</Button>
            </Space>
        );
    }
    // 表格操作列
    const calendarTableOperator = (val) => {
        return ([
            {
                label: <a href='#' style={{ color: '#7d6cff' }} onClick={() => holidayTableModal.isOpenDialog({ params: [{ field: 'calendarId', value: val }] })}>节假日</a>,
                key: 'holiday',
            },
            {
                label: <a href='#' style={{ color: '#7d6cff' }} onClick={() => workdayTableModal.isOpenDialog({ params: [{ field: 'calendarId', value: val }] })}>工作日</a>,
                key: 'workday',
            },
        ]);
    }

    // 表格列
    const calendarColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 'auto',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 'auto',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 'auto',
            search: 'selected',
            options: STATUS_OPTIONS(),
            render: (val) => STATUS_ENUMS[val] || ''
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => calendarForm.isOpenDialog(row, '编辑')} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => calendarTable.onRemove(val)} />
                        </Tooltip>
                        <Dropdown menu={{ items: calendarTableOperator(val) }} placement='bottomRight'>
                            <a style={{ margin: '0 8px' }} onClick={e => e.preventDefault()}>
                                <Space>···</Space>
                            </a>
                        </Dropdown>
                    </div>
                )
            }
        }
    ];

    // 表格设置
    const calendarTable = useTable({
        reload: page,
        remove: del,
        batchRemove: batDel,
        tools: calendarTools,
        columns: calendarColumns,
    });

    // -------------------
    // ---   方法事件   ---
    // -------------------

    useEffect(() => {
        calendarTable.onReload();
    }, []);

    return (
        <>
            <CloudTable props={calendarTable} />
            <FormModal props={calendarForm} />
            <TableModal props={holidayTableModal} />
            <FormModal props={holidayForm} />
            <TableModal props={workdayTableModal} />
            <FormModal props={workdayForm} />
        </>
    );
}

export default Calendar;